<template>
  <view>
    <view class="order-items">
      <view class="order-item" v-for="(item, index) in list" :key="index">
        <view class="order-item-top">
          <view class="order-item-top-left">{{ item.updateTime }}</view>
          <view class="order-item-top-right">{{ returnSatatus(item) }}</view>
        </view>
        <view class="order-item-bottom">
          <view class="order-item-bottom-left">订单数量:</view>
          <view class="order-item-bottom-right">{{item.orderCount}}</view>
        </view>
        <view class="order-item-bottom">
          <view class="order-item-bottom-left">对账金额:</view>
          <view class="order-item-bottom-right">{{item.amount}}</view>
        </view>
        <view class="order-item-bottom" v-if="item.commission > 0">
          <view class="order-item-bottom-left">对账成本:</view>
          <view class="order-item-bottom-right">{{item.cost}}</view>
        </view>
        <view class="order-item-bottom" v-if="item.commission > 0">
          <view class="order-item-bottom-left">对账利润:</view>
          <view class="order-item-bottom-right">{{item.profit}}</view>
        </view>
        <view class="order-item-bottom" v-if="item.commission > 0">
          <view class="order-item-bottom-left">平台佣金:</view>
          <view class="order-item-bottom-right">{{item.commission}}</view>
        </view>
        <view class="order-item-bottom">
          <view class="order-item-bottom-left">对账类型:</view>
          <view class="order-item-bottom-right">{{item.type==1?'手动发起':'平台自动'}}</view>
        </view>
        <view class="order-item-bottom">
          <view class="order-item-bottom-left">创建时间:</view>
          <view class="order-item-bottom-right">{{item.createTime}}</view>
          <view class="order-item-bottom-txt" @tap="goDetail(item)">查看订单详情</view>
        </view>
      </view>
    </view>
    <ListFooter :loadtitle="loadtitle"></ListFooter>
    <!-- 商品列表 -->
    <uni-popup ref="goodpopup">
      <view class="good">
        <view class="good-item" v-for="(ele, index) in goodList" :key="index">
          <img :src="ele.image" class="good-item-bottom-left" alt="" />
          <view class="good-item-bottom-right">
            <view class="good-item-bottom-right-1">{{ ele.storeName }}</view>
            <view class="good-item-bottom-right-2">
              <view class="good-item-bottom-right-2-left"
                >数量*{{ ele.cartNum }}</view
              >
              <view class="good-item-bottom-right-2-right">¥{{
                ele.price
              }}</view>
            </view>
          </view>
          
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { reconciliationList, reconciliationDetail, adminOrder } from "@/api/order.js";
import ListFooter from "../../components/listFooter/listFooter.vue";
export default {
  components: {ListFooter},
  data() {
    return {
      loading: false,
      loadend: false,
      loadtitle: "暂无数据",
      list: [],
      page: 1,
      limit: 20,
      goodList: []
    };
  },
  onPullDownRefresh() {
    this.list = [];
    this.page = 1;
    this.loadend = false;
    this.getData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad() {
    this.getData();
  },
  onReachBottom: function () {
    this.page++;
    this.getData();
  },
  methods: {
    returnSatatus(item) {
      if (item.status == 0) return '审核中'
      if (item.status == 1) return '审核成功，已发放至余额'
      if (item.status == 2) return '审核失败' + item.remark
    },
    goDetail(item) {
      reconciliationDetail(item.id).then(res => {
        // this.desObj = res
        this.$refs.goodpopup.open()
      })
    },
    getData() {
      if (this.loading) return;
      if (this.loadend) return;
      this.loading = true;
      this.loadtitle = "";
      uni.showLoading({
        title: "加载中...",
      });
      let data = {
        limit: this.limit,
        page: this.page,
      };
      reconciliationList(data)
        .then((res) => {
          uni.hideLoading();
          let list = res.data.list;
          let loadend = list.length < this.limit;
          this.list = this.list.concat(list);

          this.loadend = loadend;
          this.loading = false;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多";
        })
        .catch((err) => {
          this.loading = false;
          this.loadtitle = "加载更多";
        });
    },
  },
};
</script>

<style lang="scss">
.order-items {
  padding: 0 24rpx;
}
.black {
  color: #000 !important;
}
.good {
  padding: 30rpx;
  border-radius: 20rpx;
  max-height: 600rpx;
  overflow: scroll;
  width: 650rpx;
  &-item {
    display: flex;
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    &-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-left {
        font-size: 24rpx;
        font-weight: bold;
      }
      &-right {
        font-size: 24rpx;
        color: #df4b43;
      }
    }
    &-bottom {
      display: flex;
      margin-top: 10rpx;
      &-left {
        width: 100rpx;
        height: 100rpx;
      }
      &-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 20rpx;
        justify-content: space-between;
        &-1 {
          font-size: 26rpx;
          color: #948c8c;
        }
        &-2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &-left {
            font-size: 24rpx;
            color: #948c8c;
          }
          &-right {
            font-size: 24rpx;
            color: #df4b43;
          }
        }
      }
    }
  }
}
.order-item {
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-left {
      font-size: 24rpx;
      font-weight: bold;
    }
    &-right {
      font-size: 24rpx;
      color: #df4b43;
    }
  }
  &-bottom {
    display: flex;
    margin-top: 10rpx;
    &-left {
      font-size: 24rpx;
    }
    &-right {
      font-size: 26rpx;
      font-weight: 500;
      flex:1;
      text-align: right;
    }
    &-txt {
      margin-left: 20rpx;
      font-size: 26rpx;
      color: #df4b43;
    }
  }
}
</style>
